<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="js/easyui/themes/metro/easyui.css"/>
		<script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/easyui/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/easyui/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		li{
			list-style: none;
		}
		#announcement-box{
			width: 100%;
			height: 500px;
		}
		#announcement-box .announcement-item{
			float: left;
			margin: 10px;
			display: none;
		}
		#announcement-read-bg{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			background: black;
			display: none;
			opacity: 0.5;
		}
		#announcement-read-content{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			color: white;
			display: none;
		}
		#announcement-read-return{
			position: absolute;
			z-index: 3;
			top: 4px;
			right: 4px;
			font-weight: 700;
			background: white;
			border-radius: 4px;
			display: none;
		}
		#announcement-read-return a{
			height: 20px;
			line-height: 20px;
			padding: 0 4px;
			text-decoration: none;
			color: #666666;
			font-size: 12px;
		}
	</style>
	<body>
		<div id="announcement-box">
		</div>
		<div id="announcement-read-bg"></div>
		<div id="announcement-read-content">
			asdfasdfasdfasdf	
		</div>
		<div id="announcement-read-return">
			<a href="javascript:void(0);" onclick="announcement_read_return_click(this);">返回</a>	
		</div>
		
	</body>
	<script type="text/javascript">
		$(function(){
			var $announcement_box = $("#announcement-box");
			for(var i =0;i<3;i++){
				var anit = $('<div class="announcement-item"><ul id="a-i-'+i+'"></ul></div>').appendTo($announcement_box);
				anit.find('ul').datagrid({
					title:'通知'+i,
					width:450,
					height:250,
					pagination:true,
					method:'get',
					onDblClickRow:function(index,row){
						$("#announcement-read-bg").css({
							left:$("#announcement-read-bg").width()
						}).show().animate({
							left:0
						},function(){
							$("#announcement-read-content").show().html("显示了");
							$("#announcement-read-return").show();
						});
					},
				    url: 'datalist_data1.json'
				});
				anit.fadeIn();
			}
		});
		
		
		function announcement_read_return_click(){
			var $self = $(arguments[0]);
			$("#announcement-read-bg").animate({
				left:$("#announcement-read-bg").width()
			},function(){
				$(this).hide();
			});
			$("#announcement-read-content,#announcement-read-return").hide().eq(0).empty();
		}
	</script>
</html>
